import React, { Component, useState, useEffect } from "react";
import { Button, Modal, Icon, message } from "antd";
import { doMoveNode } from "@/services/knowledgegraph";

class SortNode extends React.Component {
	state = {
		data: [],
	};

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		}
	}

	moveNode = async (moveId, index) => {
		let { data } = this.state;
		const { moveNodeFun } = this.props;
		const targetId = data[index - 1].id;

		const res = await doMoveNode({ moveId, targetId });

		if (res.message == "操作成功") {
			const temp = data[index];
			data[index] = data[index - 1];
			data[index - 1] = temp;
			message.success("移动成功");
			moveNodeFun(data);
			this.setData(data);
		} else {
			message.success("移动失败");
		}
	};

	setData = (data) => {
		this.setState({
			data,
		});
	};

	render() {
		const { visible, onCancel, moveNodeFun } = this.props;
		const { data } = this.state;
		return (
			<Modal
				visible={visible}
				title='调整顺序'
				onCancel={onCancel}
				onOk={onCancel}
				footer={null}>
				{data.length
					? data.map((item, index) => {
							return (
								<div
									key={item.id}
									style={{
										display: "flex",
										justifyContent: "space-between",
										margin: "10px 0",
										alignItems: "center",
										alignContent: "center",
									}}>
									<div
										style={{
											backgroundColor: "rgba(4, 141, 255, 0.03529411764705882)",
											borderRadius: "50px",
											padding: "10px 5px",
											width: "80%",
										}}>
										{item.name}
									</div>
									{index !== 0 ? (
										<Icon
											type='arrow-up'
											onClick={() => this.moveNode(item.id, index)}
											style={{ marginLeft: "10px", cursor: "pointer" }}></Icon>
									) : null}
								</div>
							);
					  })
					: null}
			</Modal>
		);
	}
}

export default SortNode;
